body{
	background-image: url(../textures/background.jpg);
	/* background-image: url(../textures/shop/bg_shop.png); */
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
/* 设置隐藏、显示 */
#box_ul,#top_h,#div_img,#ul2{
	display: block;
	/* display: none; */
}
#box_ul2,#girl,#top_h2,#shop,#beibao,#chongzhi{
	/* display: block; */
	display: none;
}
/* 头部三个框框 */
#top{
	width: 100%;
	height: 46px;
	margin-left: -4px;
}
#ul{
	width: 90%;
	height: 44px;
	margin-top: -5px;
}
.img{
	width: 28%;
	height: 34px;
	float: left;
	margin-top: 8px;
	position: fixed;
}
ul li{
	list-style: none;
}
#li1{
	width: 100%;
	margin-left: -28px;
}
.img1{
	left: 38%;
}
.img2{
	left: 72%;
}
#img1,#img2,#img3{
	height: 42px;
	width: 45px;
	position: absolute;
}
#img1{
	margin-left: -14px;
	margin-top: 2px;
}
#span1{
	color: #fff;
	font-size: 14px;
	position: absolute;
	line-height: 46px;
}
.span2,.span3{
	color: #f6f877;
	position: absolute;
}
.span2{
	line-height: 48px;
	font-size: 12px;
	margin-left: 34px;
}
#img2{
	margin-left: 23%;
}
.span3,.span4{
	font-size: 14px;
	line-height: 49px;
}
.span3{
	margin-left: 144px;
}
#img2{
	margin-left: 23%;
}
#img3{
	margin-top: 2px;
	right: 82px;
}
.span4{
	right: 25px;
}

/* 剩余时间 */
#top_h,#top_h2{
	width: 100%;
	height: 35px;
	margin-left: -4px;	
	margin-top: -15px;
	font-size: 12px;
}
.top_li{
	width: 48%;
	height: 35px;
	background-image: url(../textures/bg_timer.png);
	background-size: 100% 35px;
	background-repeat: no-repeat;
}
.top_l1{
	float: left;
	margin-left: -18px;
}
.top_l2{
	float: right;
}
.top_img{
	width: 45px;
	height: 40px;
	position: absolute;
	left: 3px;
}
.top_span1{
	color: #f6f877;
	position: absolute;
	margin-top: 4px;
	margin-left: 20px;
}
.top_span2{
	color: #79e4ed;
	position: absolute;
	margin-top: 4px;
	margin-left: 70px;
}
.top_span3{
	margin-left: 118px;
}
.top_img1{
	width: 60px;
	height: 5px;
	position: absolute;
	left: 47.5px;
	top: 68.5px;
	z-index: 2;
}
.top_img2{
	width: 136px;
	height: 8px;
	position: absolute;
	left: 45px;
	top: 67.5px;
}
.top_imga{
	width: 55px;
	height: 50px;
	position: absolute;
	right: 148px;
}
.top_imgb{
	width: 40px;
	height: 43px;
	position: absolute;
	right: 165px;
	top: 45px;
}
.top_img3{
	width: 36px;
	height: 5px;
	position: absolute;
	right: 125.55px;
	top: 68.5px;
	z-index: 2;
}
.top_img4{
	width: 136px;
	height: 8px;
	position: absolute;
	right: 29px;
	top: 67.5px;
}


/* 信息 */
.btn_message{
	width: 55px;
	height: 48px;
	margin-top: 10px;
}

/* 底部 */
#bottom{
	width: 100%;
	height: 240px;
	position: absolute;
	bottom: 5px;
	left: 0;
}
#ul1{
	width: 86%;
	height: 78px;
	position: absolute;
	bottom: 76px;
	left: 2%;
	background-image: url(../textures/bg_sub_btns.png);
	background-size: 100% 90px;
	background-repeat: no-repeat;
}
#div_img{
	width: 80px;
	height: 24px;
	background-image: url(../textures/btn_expand_slot.png);
	background-size: 100% 24px;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 156px;
	left: 40%;
	z-index: 10;
}
.img_ul{
	width: 62px;
	height: 22px;
	position: absolute;
	top: 5px;
	left: 9px;
}
#ul2{
	width: 90%;
	height: 86px;
	position: absolute;
	bottom: -5px;
	left: 0;
	background-image: url(../textures/bg_main_btns.png);
	background-size: 100% 86px;
	background-repeat: no-repeat;
}
.li1{
	width: 13%;
	height: 70px;
	float: left;
	margin-top: 10px;
}
.li_l{
	margin-left: 8px;
}
.img3{
	width: 100%;
	height: 40px;
	margin-top: 7px;
}
.imga{
	width: 40px;
	height: 26px;
	position: absolute;
	top: 46px;
}
.img_1{
	left: 42px;
}
.img_2{
	left: 98px;
}
.img_3{
	left: 150px;
}
.img_4{
	right: 150px;
}
.img_5{
	right: 98px;
}
.img_6{
	right: 42px;
}
.li2{
	width: 13%;
	height: 70px;
	float: left;
	margin-top: 10px;
}
.li_l1{
	margin-left: -12px;
}
.li_l2{
	margin-left: 13px;
}
.li2 img{
	width: 100%;
	height: 56px;
	margin-top: 5px;
}

/* 第二个页面显示 */

/* 第二个页面的人物 */
#girl{
	width: 270px;
	height: 275px;
	position: absolute;
	top: 241px;
	left: 0px;
}

/* 商店 */
#shop{
	width: 200px;
	height: 296px;
	position: absolute;
	top: 80px;
	right: 0;
}
#shop_img{
	width: 186px;
	height: 65px;
}
#shop_img1{
	width: 16px;
	height: 252px;
	position: absolute;
	top: 24px;
	z-index: 2;
}
.shop_btn{
	width: 120px;
	height: 43px;
	margin-left: 34px;
	background-image: url(../textures/shop/btn_purple.png);
	background-size: 120px 38px;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 9;
}
.shop_img{
	width: 66px;
	height: 34px;
	margin-left: 27px;
}
.shop_img1{
	width: 80px;
	height: 34px;
	margin-left: 20px;
}
/* 底部购买月卡 */
#box_ul2{
	width: 98%;
	height: 135px;
	background-image: url(../textures/shop/bot_frame.png);
	background-size: 100% 135px;
	background-repeat: no-repeat;
	position: absolute;
	top: 20px;
	left: 1%;
}
.box_ul2_img{
	width: 88%;
	height: 80px;
	position: absolute;
	top: 28px;
	left: 6%;
}
.box_ul2_up{
	width: 80px;
	height: 24px;
	background-image: url(../textures/btn_expand_slot.png);
	background-size: 100% 24px;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	left: 40%;
	z-index: 10;
}
.img_up{
	width: 62px;
	height: 20px;
	position: absolute;
	top: -4px;
	left: 9px;
}

/* 第三个页面 */
/* 充值 */
#chongzhi,#beibao{
	width: 96%;
	height: 390px;
	background-image: url(../textures/heroslot/bg_panel_wood.png);
	background-size: 94% 390px;
	background-repeat: no-repeat;
	z-index: 10;
	position: absolute;
	top: 168px;
	left: 16px;
}
#cz_img{
	width: 385px;
	height: 405px;
	position: absolute;
	margin-left: -4px;
	margin-top: -4px;
}
.chongzhi{
	width: 165px;
	height: 62px;
	background-image: url(../textures/heroslot/title_bg.png);
	background-size: 165px 62px;
	background-repeat: no-repeat;
	position: absolute;
	margin-left: 115px;
	top: -24px;
}
.zc_img{
	width: 83px;
	height: 38px;
	margin-left: 41px;
	margin-top: 7px;
}
.btn_close{
	width: 52px;
	height: 52px;
	position: absolute;
	right: 3px;
	top: -15px;
}
.btn_img{
	width: 86px;
	height: 40px;
	margin-top: 32px;
	float: left;
	background-size: 86px 40px;
	background-repeat: no-repeat;
}
#btn_img{
	background-image: url(../textures/shop/btn_sm_red.png);
	margin-left: 25px;
}
#btn_img1{
	background-image: url(../textures/shop/btn_sm_blue.png);
	margin-left: 5px;
}
.btn_img2{
	width: 44px;
	height: 20px;
	margin-left: 21px;
	margin-top: 6.5px;
}

#VIP{
	width: 345px;
	height: 40px;
	background-image: url(../textures/shop/banner_red_long.png);
	background-size: 345px 40px;
	background-repeat: no-repeat;
	float: left;
	margin-left: 15px;
	margin-top: -8px;
}
.vip{
	width: 30px;
	height: 18px;
	float: left;
	margin-top: 12.5px;
	margin-left: 20px;
}
#vip_box{
	width: 96px;
	height: 36px;
	float: left;
	margin-left: 26px;
	margin-top: 2px;
	background-image: url(../textures/shop/btn_purple2.png);
	background-size: 96px 36px;
	background-repeat: no-repeat;
}
.vip_box{
	width: 70px;
	height: 23px;
	margin-top: 6px;
	margin-left: 13px;
}
.shop_icon{
	width: 46px;
	height: 40px;
	margin-top: 0px;
	margin-left: 40px;
}
.shop_span{
	position: absolute;
	margin-top: 10px;
	margin-left: 2px;
	font-size: 16px;
	color: #f7ec8c;
}
#box1{
	width: 340px;
	height: 88px;
	float: left;
	margin-left: 18px;
	background-image: url(../textures/heroslot/bg_panel_paper.png);
	background-size: 340px 88px;
	background-repeat: no-repeat;
}
.box1_div{
	width: 110px;
	height: 70px;
	float: left;
	margin-left: 18px;
	margin-top: 7px;
	background-size: 100px 70px;
	background-repeat: no-repeat;
}
#box1_item1{
	background-image: url(../textures/shop/item1.png);
}
#box1_item2{
	background-image: url(../textures/shop/item2.png);
}
#box1_item3{
	background-image: url(../textures/shop/item3.png);
}
.box1_div_img{
	width: 110px;
	height: 25px;
	margin-left: -5px;
	margin-top: -3px;
}
#box1_span{
	font-size: 12px;
	color: #FFFFFF;
	position: absolute;
	left: 60px;
	margin-top: -1px;
}
#box1_div2{
	width: 110px;
	height: 22px;
	background-image: url(../textures/shop/banner_gradient.png);
	background-size: 110px 22px;
	background-repeat: no-repeat;
	float: left;
	margin-top: 7px;
}
#box1_div2 img{
	width: 70px;
	height: 18px;
	margin-top: 2px;
	margin-left: 5px;
}
.box1_span{
	font-size: 13px;
	color: #641210;
	float: left;
	margin-left: 5px;
}
#box1_btn{
	width: 80px;
	height: 34px;
	float: right;
	margin-right: 20px;
	margin-top: 2px;
	background-image: url(../textures/shop/btn_red.png);
	background-size: 80px 34px;
	background-repeat: no-repeat;
}
#box1_btn_span{
	font-size: 16px;
	color: #fffba9;
	line-height: 32px;
	margin-left: 26px;
}
/* 背包 */
#beibao{
	width: 380px;
	height: 390px;
	background-image: url(../textures/heroslot/bg_panel_red.png);
	background-size: 355px 430px;
	background-repeat: no-repeat;
	z-index: 10;
	position: absolute;
	top: 168px;
	left: 27px;
}
.bb_img{
	width: 61px;
	height: 36px;
	margin-left: 52px;
	margin-top: 9px;
}
.bb_left{
	width: 76px;
	height: 42px;
	background-image: url(../textures/heroslot/btn_up_blue.png);
	background-size: 74px 42px;
	background-repeat: no-repeat;
	float: left;
	margin-top: 25px;
	margin-left: 6px;
}
.bb_left_img{
	width: 56px;
	height: 28px;
	margin-left: 10px;
	margin-top: 7px;
}
.bb_right{
	width: 76px;
	height: 42px;
	background-image: url(../textures/heroslot/btn_up_blue.png);
	background-size: 74px 42px;
	background-repeat: no-repeat;
	float: right;
	margin-top: 25px;
	margin-right: 31px;
}
#btn_two{
	width: 120px;
	height: 40px;
	float: left;
	margin-left: 38px;
	margin-top: 22px;
}
/* 英雄 怪物 */
#big_box{
	width: 325px;
	height: 265px;
	float: left;
	margin-left: 13px;
	overflow: hidden;
}
#box_5{
	width: 315px;
	height: 65px;
	float: left;
	margin-left: 5px;
	margin-top: 10px;
}
.box5_top{
	margin-top: 10px;
}
.hero{
	width: 58px;
	height: 70px;
	float: left;
	background-size: 60px 70px;
	background-repeat: no-repeat;
	margin-top: -4px;
}
#hero1{
	background-image: url(../textures/heroslot/rare1.png);
}
#hero2{
	background-image: url(../textures/heroslot/rare3.png);
}
#hero3{
	background-image: url(../textures/heroslot/rare2.png);
}
.hero_img1{
	width: 90px;
	height: 80px;
	float: left;
	margin-left: -16px;
	margin-top: -7px;
}
.hero_img2{
	width: 20px;
	height: 20px;
	float: right;
	margin-top: -78px;
	margin-right: -5px;
}
.hero_span{
	font-size: 12px;
	color: #ece4e4;
	float: left;
	margin-left: 12px;
	margin-top: -72px;
}
.hero_img3{
	width: 22px;
	height: 22px;
	float: left;
	margin-top: -28px;
	margin-left: -4px;
}
#xx{
	width: 45px;
	height: 12px;
	float: left;
	margin-left: 14px;
	margin-top: -21px;
}
.hero_img_xx{
	width: 13px;
	height: 13px;
	float: left;
	
}
.xx_left{
	margin-left: -6px;
}
/* 出售、强化、进化按钮 */
#btn_three{
	width: 320px;
	height: 40px;
	float: left;
	margin-top: 12px;
	margin-left: 20px
}
.chushou{
	width: 95px;
	height: 40px;
	background-image: url(../textures/heroslot/btn_blue.png);
	background-size: 95px 38px;
	background-repeat: no-repeat;
	float: left;
	margin-top: 6px;
}
.chushou_img{
	width: 55px;
	height: 35px;
	margin-left: 20px;
	margin-top: 1px;
}